<!--
 * @Description: Description
 * @Author': xuqinyang'
 * @Date: 2022-10-17 09:42:15
 * @LastEditors: xuqinyang
 * @LastEditTime: 2022-12-05 14:50:34
-->
<template>
  <div class="main">
    <!-- 流量数据 -->
    <div v-loading="trafficLoading" class="traffic">
      <div class="leftSider">
        <div class="infostyle">
          <div class="titleboxstyle"></div>
          <div style="margin-left: 10px">
            <el-tooltip
              content="计划书，计划书，智能保顾，国联人寿公众号，朋友圈文章/视频，企微文章/视频，企微活动到访的人数之和"
              effect="dark" placement="top-start">
              <div>流量数据</div>
            </el-tooltip>
          </div>
        </div>
        <div class="number">
          {{ trafficNumbers || 0 }}<span class="price"> 人 </span>
        </div>
      </div>
      <div class="rightSider">
        <div class="box">
          <span>
            <div>数据名称</div>
          </span>
          <span>
            <el-tooltip content="客户类型为访客，计划书，智能保顾，国联人寿公众号，朋友圈文章/视频，企微文章/视频，企微活动到访的人数之和" effect="dark" placement="top-start">
              <div>访客数量</div>
            </el-tooltip>
          </span>
          <span>
            <el-tooltip content="客户类型为新客（潜客+准客），计划书，智能保顾，国联人寿公众号，朋友圈文章/视频，企微文章/视频，企微活动到访的人数之和" effect="dark" placement="top-start">
              <div>新客数量</div>
            </el-tooltip>
          </span>
          <span>
            <el-tooltip content="客户类型为老客（已签单客户），计划书，智能保顾，国联人寿公众号，朋友圈文章/视频,企微文章/视频，企微活动到访的人数之和" effect="dark" placement="top-start">
              <div>老客数量</div>
            </el-tooltip></span>
          <span>
            <el-tooltip content="签单的数量（成交保单数量）" effect="dark" placement="top-start">
              <div>签单数量</div>
            </el-tooltip></span>
        </div>
        <div class="box1">
          <div>今日浏览量</div>
          <div class="span1">{{ visitTraffic.nowTraffic || 0 }}</div>
          <div class="span1">{{ newTraffic.nowTraffic || 0 }}</div>
          <div class="span1">{{ oldTraffic.nowTraffic || 0 }}</div>
          <div class="span1">{{ signTraffic.nowTraffic || 0 }}</div>
        </div>
        <div class="box2">
          <div>昨日流量</div>
          <div class="span2">{{ visitTraffic.yesterdayTraffic || 0 }}</div>
          <div class="span2">{{ newTraffic.yesterdayTraffic || 0 }}</div>
          <div class="span2">{{ oldTraffic.yesterdayTraffic || 0 }}</div>
          <div class="span2">{{ signTraffic.yesterdayTraffic || 0 }}</div>
        </div>
        <div class="box3">
          <div>历史峰值</div>
          <div class="span3">{{ visitTraffic.historyTraffic || 0 }}</div>
          <div class="span3">{{ newTraffic.historyTraffic || 0 }}</div>
          <div class="span3">{{ oldTraffic.historyTraffic || 0 }}</div>
          <div class="span3">{{ signTraffic.historyTraffic || 0 }}</div>
        </div>
      </div>
    </div>
    <!-- 核心指标 -->
    <div v-loading="centerLoading" class="core">
      <div class="head">
        <!-- 头部左侧标题 -->
        <div class="infostyle">
          <div class="titleboxstyle"></div>
          <div style="margin-left: 10px">核心指标</div>
        </div>
        <!-- 头部右侧标题 -->
        <div class="rightSider">
          <el-select v-model="centerForm.timeType" class="selector" placeholder="请选择"
                     @change="selectChange(centerForm)"
          >
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <!-- 按天 -->
          <el-date-picker v-if="centerForm.timeType === 'DAY'" key="tian" v-model="centerForm.selectDate"
                          :picker-options="pickerOptions" align="right" class="picker" end-placeholder="结束日期"
                          format="yyyy-MM-dd"
                          range-separator="至" start-placeholder="开始日期" type="daterange"
                          unlink-panels
                          value-format="yyyy-MM-dd" @change="centerChange"
          >
          </el-date-picker>
          <!-- 自然周 -->
          <el-date-picker v-if="centerForm.timeType === 'WEEK'" key="zhou" v-model="centerForm.selectDate"
                          :picker-options="pickerOptions" class="picker" format="yyyy 第 WW 周" placeholder="选择周"
                          type="week"
                          value-format="yyyy-MM-dd" @change="centerChange"
          >
          </el-date-picker>
          <!-- 自然月 -->
          <el-date-picker v-if="centerForm.timeType === 'MONTH'" key="yue" v-model="centerForm.selectDate"
                          :picker-options="pickerOptions" class="picker" end-placeholder="结束月份" range-separator="至"
                          start-placeholder="开始月份"
                          type="monthrange" value-format="yyyy-MM" @change="centerChange"
          >
          </el-date-picker>
          <!-- 自然年 -->
          <el-date-picker v-if="centerForm.timeType === 'YEAR'" key="nian" v-model="centerForm.startDate"
                          :picker-options="pickerOptions" class="picker pickerYear" placeholder="选择起始年" size="mini"
                          style="width: 30%;"
                          type="year" value-format="yyyy" @change="centerChange"
          >
          </el-date-picker>
          <span v-if="centerForm.timeType === 'YEAR'" class="range-word"> 至 </span>
          <el-date-picker v-if="centerForm.timeType === 'YEAR'" key="niana" v-model="centerForm.endDate"
                          :picker-options="pickerOptions" class="picker pickerYear" format="yyyy"
                          placeholder="选择结束年"
                          size="mini"
                          style="width: 30%;" type="year" value-format="yyyy" @change="centerChange"
          >
          </el-date-picker>
        </div>
      </div>

      <!-- 模块 -->
      <div class="modules">
        <div class="module1" style="margin-left: 40px">
          <div class="titles">
            <el-tooltip content="统计所在渠道产生的规模保费" effect="dark" placement="top-start">
              <div>规模保费</div>
            </el-tooltip>
          </div>
          <div class="number">{{ centerData.scalePrem || 0 }}<span class="price"> 万元 </span></div>
          <div class="data">
            <span class="ring"> 环比 </span>
            <img :src="require(`../../assets/cutomer/${scalePremRingFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="scalePremRingFlag ? 'text1' : 'text'">
              {{ centerData.scalePremRing || '0%' }}
            </span>
            <span class="same" style="margin-left: 15px"> 同比 </span>
            <img :src="require(`../../assets/cutomer/${scalePremSameFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="scalePremSameFlag ? 'text1' : 'text'">
              {{ centerData.scalePremSame || '0%' }}
            </span>
          </div>
        </div>
        <div class="line"></div>
        <div class="module1">
          <div class="titles">
            <el-tooltip content="签单率=签单客户÷客户总数量（增量+存量）" effect="dark" placement="top-start">
              <div>签单率</div>
            </el-tooltip>
          </div>
          <div class="number">{{ centerData.signingRate || '0%' }}</div>
          <div class="data">
            <span class="ring"> 环比 </span>
            <img :src="require(`../../assets/cutomer/${signingRateRingFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="signingRateRingFlag ? 'text1' : 'text'">
              {{ centerData.signingRateRing || '0%' }}
            </span>
            <span class="same" style="margin-left: 15px"> 同比 </span>
            <img :src="require(`../../assets/cutomer/${signingRateSameFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="signingRateSameFlag ? 'text1' : 'text'">
              {{ centerData.signingRateSame || '0%' }}
            </span>
          </div>
        </div>
        <div class="line"></div>
        <div class="module1">
          <div class="titles">
            <el-tooltip content="客单价=客户的规模保费÷客户数量（存量）" effect="dark" placement="top-start">
              <div>客单价</div>
            </el-tooltip>
          </div>
          <div class="number">{{ centerData.unitPrice || 0 }}<span class="price"> 元 </span></div>
          <div class="data">
            <span class="ring"> 环比 </span>
            <img :src="require(`../../assets/cutomer/${unitPriceRingFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="unitPriceRingFlag ? 'text1' : 'text'">
              {{ centerData.unitPriceRing || '0%' }}
            </span>
            <span class="same" style="margin-left: 15px"> 同比 </span>
            <img :src="require(`../../assets/cutomer/${unitPriceSameFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="unitPriceSameFlag ? 'text1' : 'text'">
              {{ centerData.unitPriceSame || '0%' }}
            </span>
          </div>
        </div>
        <div class="line"></div>
        <div class="module1">
          <div class="titles">
            <el-tooltip content="统计所在渠道产生的有效保单数量（指非拒保、延期、撤单、终止的保单）" effect="dark" placement="top-start">
              <div>保单数量</div>
            </el-tooltip>
          </div>
          <div class="number">
            {{ centerData.policyNum || 0 }}
            <span class="price"> 单 </span>
          </div>
          <div class="data">
            <span class="ring"> 环比 </span>
            <img :src="require(`../../assets/cutomer/${policyNumRingFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="policyNumRingFlag ? 'text1' : 'text'">
              {{ centerData.policyNumRing || '0%' }}
            </span>
            <span class="same" style="margin-left: 15px"> 同比 </span>
            <img :src="require(`../../assets/cutomer/${policyNumSameFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="policyNumSameFlag ? 'text1' : 'text'">
              {{ centerData.policyNumSame || '0%' }}
            </span>
          </div>
        </div>
        <div class="line"></div>
        <div class="module1">
          <div class="titles" style="width: 84px">
            <el-tooltip content="指进行交纳保费的客户" effect="dark" placement="top-start">
              <div>签单客户数量</div>
            </el-tooltip>
          </div>
          <div class="number">
            {{ centerData.feeCustomerNum || 0 }}
            <span class="price"> 人 </span>
          </div>
          <div class="data">
            <span class="ring"> 环比 </span>
            <img :src="require(`../../assets/cutomer/${feeCustomerNumRingFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="feeCustomerNumRingFlag ? 'text1' : 'text'">
              {{ centerData.feeCustomerNumRing || '0%' }}
            </span>
            <span class="same" style="margin-left: 15px"> 同比 </span>
            <img :src="require(`../../assets/cutomer/${feeCustomerNumSameFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="feeCustomerNumSameFlag ? 'text1' : 'text'">
              {{ centerData.feeCustomerNumSame || '0%' }}
            </span>
          </div>
        </div>
      </div>
      <!-- 图表 -->
      <div class="chart">
        <div id="chartOne"></div>
        <div id="chartTwo"></div>
      </div>
    </div>
    <!-- 客户看板 -->
    <div v-loading="customerLoading" class="cutomer">
      <!-- 头部 -->
      <div class="head">
        <!-- 头部左侧标题 -->
        <div class="infostyle">
          <div class="titleboxstyle"></div>
          <div style="margin-left: 10px">客户看板</div>
        </div>
        <!-- 头部右侧标题 -->
        <div class="rightSider">
          <el-select v-model="customerForm.timeType" class="selector" placeholder="请选择"
                     @change="selectChange(customerForm)"
          >
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <!-- 按天 -->
          <el-date-picker v-if="customerForm.timeType === 'DAY'" key="tian" v-model="customerForm.selectDate"
                          :picker-options="pickerOptions" align="right" class="picker" end-placeholder="结束日期"
                          format="yyyy-MM-dd"
                          range-separator="至" start-placeholder="开始日期" type="daterange"
                          unlink-panels
                          value-format="yyyy-MM-dd" @change="customerChange"
          >
          </el-date-picker>
          <!-- 自然周 -->
          <el-date-picker v-if="customerForm.timeType === 'WEEK'" key="zhou" v-model="customerForm.selectDate"
                          :picker-options="pickerOptions" class="picker" format="yyyy 第 WW 周" placeholder="选择周"
                          type="week"
                          value-format="yyyy-MM-dd" @change="customerChange"
          >
          </el-date-picker>
          <!-- 自然月 -->
          <el-date-picker v-if="customerForm.timeType === 'MONTH'" key="yue" v-model="customerForm.selectDate"
                          :picker-options="pickerOptions" class="picker" end-placeholder="结束月份" range-separator="至"
                          start-placeholder="开始月份"
                          type="monthrange" value-format="yyyy-MM" @change="customerChange"
          >
          </el-date-picker>
          <!-- 自然年 -->
          <el-date-picker v-if="customerForm.timeType === 'YEAR'" key="nian"
                          v-model="customerForm.startDate" :picker-options="pickerOptions" class="picker pickerYear"
                          placeholder="选择起始年"
                          size="mini" style="width: 30%;" type="year" value-format="yyyy" @change="customerChange"
          >
          </el-date-picker>
          <span v-if="customerForm.timeType === 'YEAR'" class="range-word"> 至 </span>
          <el-date-picker v-if="customerForm.timeType === 'YEAR'" key="niana" v-model="customerForm.endDate"
                          :picker-options="pickerOptions" class="picker pickerYear" format="yyyy"
                          placeholder="选择结束年"
                          size="mini"
                          style="width: 30%;" type="year" value-format="yyyy" @change="customerChange"
          >
          </el-date-picker>
        </div>
      </div>
      <!-- 模块 -->
      <div class="modules">
        <div class="module1">
          <div class="titles" style="width: 84px">
            <el-tooltip content="计算访客、潜客、准客、存量客户的数量之和" effect="dark" placement="top-start">
              <div>全部客户数量</div>
            </el-tooltip>
          </div>
          <div class="number">
            {{ customerData.totalCustomerNum || 0 }}
            <span class="price"> 人 </span>
          </div>
          <div class="data">
            <span class="ring"> 环比 </span>
            <img :src="require(`../../assets/cutomer/${totalCustomerNumRingFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="totalCustomerNumRingFlag ? 'text1' : 'text'">
              {{ customerData.totalCustomerNumRing || 0 }}
            </span>
            <span class="same" style="margin-left: 10px"> 同比 </span>
            <img :src="require(`../../assets/cutomer/${totalCustomerNumSameFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="totalCustomerNumSameFlag ? 'text1' : 'text'">
              {{ customerData.totalCustomerNumSame || 0 }}
            </span>
          </div>
        </div>
        <div class="line"></div>
        <div class="module1">
          <div class="titles" style="width: 84px">
            <el-tooltip content="没有获取到五要素(姓名、手机号、性别、证件类型、证件号)的客户的数量" effect="dark" placement="top-start">
              <div>访客数量</div>
            </el-tooltip>
          </div>
          <div class="number">
            {{ customerData.visitCustomerNum || 0 }}
            <span class="price"> 人 </span>
          </div>
          <div class="data">
            <span class="ring"> 环比 </span>
            <img :src="require(`../../assets/cutomer/${visitCustomerNumRingFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="visitCustomerNumRingFlag ? 'text1' : 'text'">
              {{ customerData.visitCustomerNumRing || 0 }}
            </span>
            <span class="same" style="margin-left: 10px"> 同比 </span>
            <img :src="require(`../../assets/cutomer/${visitCustomerNumSameFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="visitCustomerNumSameFlag ? 'text1' : 'text'">
              {{ customerData.visitCustomerNumSame || 0 }}
            </span>
          </div>
        </div>
        <div class="line"></div>
        <div class="module1">
          <div class="titles" style="width: 84px">
            <el-tooltip content="有手机号的客户的数量" effect="dark" placement="top-start">
              <div>潜客数量</div>
            </el-tooltip>
          </div>
          <div class="number">
            {{ customerData.potentialCustomerNum || 0 }}
            <span class="price"> 人 </span>
          </div>
          <div class="data">
            <span class="ring"> 环比 </span>
            <img :src="require(`../../assets/cutomer/${potentialCustomerNumRingFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="potentialCustomerNumRingFlag ? 'text1' : 'text'">
              {{ customerData.potentialCustomerNumRing || 0 }}
            </span>
            <span class="same" style="margin-left: 10px"> 同比 </span>
            <img :src="require(`../../assets/cutomer/${potentialCustomerNumSameFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="potentialCustomerNumSameFlag ? 'text1' : 'text'">
              {{ customerData.potentialCustomerNumSame || 0 }}
            </span>
          </div>
        </div>
        <div class="line"></div>
        <div class="module1">
          <div class="titles" style="width: 84px">
            <el-tooltip content="有3要素（姓名，证件号，证件类型）的客户的数量" effect="dark" placement="top-start">
              <div>准客数量</div>
            </el-tooltip>
          </div>
          <div class="number">
            {{ customerData.prospectiveCustomerNum || 0 }}
            <span class="price"> 人 </span>
          </div>
          <div class="data">
            <span class="ring"> 环比 </span>
            <img :src="require(`../../assets/cutomer/${prospectiveCustomerNumRingFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="prospectiveCustomerNumRingFlag ? 'text1' : 'text'">
              {{ customerData.prospectiveCustomerNumRing || 0 }}
            </span>
            <span class="same" style="margin-left: 10px"> 同比 </span>
            <img :src="require(`../../assets/cutomer/${prospectiveCustomerNumSameFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="prospectiveCustomerNumSameFlag ? 'text1' : 'text'">
              {{ customerData.prospectiveCustomerNumSame || 0 }}
            </span>
          </div>
        </div>
        <div class="line"></div>
        <div class="module1">
          <div class="titles" style="width: 84px">
            <el-tooltip content="有5要素（姓名，性别，手机号，证件类型，证件号）且有购买记录的客户数量" effect="dark" placement="top-start">
              <div>存量客户数量</div>
            </el-tooltip>
          </div>
          <div class="number">
            {{ customerData.signHistoryCustomerNum || 0 }}
            <span class="price"> 人</span>
          </div>
          <div class="data">
            <span class="ring"> 环比 </span>
            <img :src="require(`../../assets/cutomer/${signHistoryCustomerNumRingFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="signHistoryCustomerNumRingFlag ? 'text1' : 'text'">
              {{ customerData.signHistoryCustomerNumRing || 0 }}
            </span>
            <span class="same" style="margin-left: 10px"> 同比 </span>
            <img :src="require(`../../assets/cutomer/${signHistoryCustomerNumSameFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="signHistoryCustomerNumSameFlag ? 'text1' : 'text'">
              {{ customerData.signHistoryCustomerNumSame || 0 }}
            </span>
          </div>
        </div>
        <div class="line"></div>
        <div class="module1">
          <div class="titles" style="width: 84px">
            <el-tooltip content="企微删除好友状态的客户（客户主动删除）" effect="dark" placement="top-start">
            <div>流失客户数量</div>
          </el-tooltip></div>
          <div class="number">
            {{ customerData.lostCustomerNum || 0 }}
            <span class="price"> 人 </span>
          </div>
          <div class="data">
            <span class="ring"> 环比 </span>
            <img :src="require(`../../assets/cutomer/${lostCustomerNumRingFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="lostCustomerNumRingFlag ? 'text1' : 'text'">
              {{ customerData.lostCustomerNumRing || 0 }}
            </span>
            <span class="same" style="margin-left: 10px"> 同比 </span>
            <img :src="require(`../../assets/cutomer/${lostCustomerNumSameFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="lostCustomerNumSameFlag ? 'text1' : 'text'">
              {{ customerData.lostCustomerNumSame || 0 }}
            </span>
          </div>
        </div>
      </div>
      <!-- 累计活跃数量 -->
      <div class="active">
        <div class="active1">
          <div class="titles">累计潜客活跃数量</div>
          <div class="number">
            {{ customerData.cumulativePotentialNum || 0 }}
            <span class="price"> 人 </span>
          </div>
          <div class="date">
            {{ customerTime }}
          </div>
        </div>
        <div class="active1">
          <div class="titles">累计准客活跃数量</div>
          <div class="number">
            {{ customerData.cumulativeProspectiveNum || 0 }}
            <span class="price"> 人 </span>
          </div>
          <div class="date">
            {{ customerTime }}
          </div>
        </div>
        <div class="active1">
          <div class="titles">累计存量客户活跃数量</div>
          <div class="number">
            {{ customerData.cumulativeSignHistoryNum || 0 }}
            <span class="price"> 人 </span>
          </div>
          <div class="date">
            {{ customerTime }}
          </div>
        </div>
        <div class="active1">
          <div class="titles">累计全部客户活跃数量</div>
          <div class="number">
            {{ customerData.cumulativeTotalNum || 0 }}
            <span class="price"> 人 </span>
          </div>
          <div class="date">
            {{ customerTime }}
          </div>
        </div>
      </div>
      <!-- 图表 -->
      <div class="chart">
        <div id="chartsOne"></div>
        <div id="chartsTwo"></div>
      </div>
      <div class="chart1">
        <div id="chartsThree"></div>
        <div id="chartsFour"></div>
      </div>
      <div class="chart2">
        <div id="chartsFive"></div>
        <div id="chartsSix"></div>
      </div>
    </div>
    <!-- 产品看板 -->
    <div v-loading="productLoading" class="product">
      <!-- 头部 -->
      <div class="head">
        <!-- 头部左侧标题 -->
        <div class="infostyle">
          <div class="titleboxstyle"></div>
          <div style="margin-left: 10px">产品看板</div>
        </div>
        <!-- 头部右侧标题 -->
        <div class="rightSider">
          <el-select v-model="productForm.timeType" class="selector" placeholder="请选择"
                     @change="selectChange(productForm)"
          >
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <!-- 按天 -->
          <el-date-picker v-if="productForm.timeType === 'DAY'" key="tian" v-model="productForm.selectDate"
                          :picker-options="pickerOptions" align="right" class="picker" end-placeholder="结束日期"
                          format="yyyy-MM-dd"
                          range-separator="至" start-placeholder="开始日期" type="daterange"
                          unlink-panels
                          value-format="yyyy-MM-dd" @change="productChange"
          >
          </el-date-picker>
          <!-- 自然周 -->
          <el-date-picker v-if="productForm.timeType === 'WEEK'" key="zhou" v-model="productForm.selectDate"
                          :picker-options="pickerOptions" class="picker" format="yyyy 第 WW 周" placeholder="选择周"
                          type="week"
                          value-format="yyyy-MM-dd" @change="productChange"
          >
          </el-date-picker>
          <!-- 自然月 -->
          <el-date-picker v-if="productForm.timeType === 'MONTH'" key="yue" v-model="productForm.selectDate"
                          :picker-options="pickerOptions" class="picker" end-placeholder="结束月份" range-separator="至"
                          start-placeholder="开始月份"
                          type="monthrange" value-format="yyyy-MM" @change="productChange"
          >
          </el-date-picker>
          <!-- 自然年 -->
          <el-date-picker v-if="productForm.timeType === 'YEAR'" key="nian"
                          v-model="productForm.startDate" :picker-options="pickerOptions" class="picker pickerYear"
                          placeholder="选择起始年"
                          size="mini"
                          style="width: 30%;" type="year" value-format="yyyy" @change="productChange"
          >
          </el-date-picker>
          <span v-if="productForm.timeType === 'YEAR'" class="range-word"> 至 </span>
          <el-date-picker v-if="productForm.timeType === 'YEAR'" key="niana" v-model="productForm.endDate"
                          :picker-options="pickerOptions" class="picker pickerYear" format="yyyy"
                          placeholder="选择结束年"
                          size="mini"
                          style="width: 30%;" type="year" value-format="yyyy" @change="productChange"
          >
          </el-date-picker>
        </div>
      </div>
      <!-- 累计活跃数量 -->
      <div class="active">
        <div class="active1">
          <div>
            <div class="titles">
              <el-tooltip content="统计全部已上线的产品数量" effect="dark" placement="top-start">
                <div>全部产品数量</div>
              </el-tooltip>
            </div>
            <div class="number">
              {{ producteData.allRiskNum || 0 }}
              <span class="price"> 个 </span>
            </div>
            <div class="date">
              {{ productTime }}
            </div>
          </div>
          <!-- <div class="active2">
            <span class="text2"> 同比上期 </span>
            <img v-if="sameStatus" src="../../assets/cutomer/down.png" width="7" height="8" />
            <span class="text1">
              {{ sameRatio }}
            </span>
          </div> -->
        </div>

        <div class="active1">
          <div>
            <div class="titles">
              <el-tooltip content="统计近一个月内新增加的产品数" effect="dark" placement="top-start">
                <div>新增产品数量</div>
              </el-tooltip>
            </div>
            <div class="number">
              {{ producteData.addRiskNum || 0 }}
              <span class="price"> 个 </span>
            </div>
            <div class="date">
              {{ productTime }}
            </div>
          </div>
          <!-- <div class="active2">
            <span class="text2"> 同比上期 </span>
            <img v-if="sameStatus" src="../../assets/cutomer/down.png" width="7" height="8" />
            <span class="text1">
              {{ sameRatio }}
            </span>
          </div> -->
        </div>
        <div class="active1">
          <div>
            <div class="titles">
              <el-tooltip content="统计所有上线至今在售的产品数量" effect="dark" placement="top-start">
                <div>在售产品数量</div>
              </el-tooltip>
            </div>
            <div class="number">
              {{ producteData.onlineRiskNum || 0 }}
              <span class="price"> 个 </span>
            </div>
            <div class="date">
              {{ productTime }}
            </div>
          </div>

          <!-- <div class="active2">
            <span class="text2"> 同比上期 </span>
            <img v-if="sameStatus" src="../../assets/cutomer/down.png" width="7" height="8" />
            <span class="text1">
              {{ sameRatio }}
            </span>
          </div> -->
        </div>
        <div class="active1">
          <div>
            <div class="titles">
              <el-tooltip content="统计所有已停售的产品" effect="dark" placement="top-start">
                <div>停售产品数量</div>
              </el-tooltip>
            </div>
            <div class="number">
              {{ producteData.offlineRiskNum || 0 }}
              <span class="price"> 个 </span>
            </div>
            <div class="date">
              {{ productTime }}
            </div>
          </div>
          <!-- <div class="active2">
            <span class="text2"> 同比上期 </span>
            <img v-if="sameStatus" src="../../assets/cutomer/down.png" width="7" height="8" />
            <span class="text1">
              {{ sameRatio }}
            </span>
          </div> -->
        </div>
      </div>
      <!-- 图表 -->
      <div class="chart">
        <div id="chart1"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud'
import {parseTime} from '@/utils/common'
import {coreTargetBoard, customerBoard, getHomeList, getRiskBoard} from '@/api/customerInsight/index'

export default {
  data() {
    return {
      trafficNumbers: 4160,//流量数据总数
      visitTraffic: {},// 访客数量
      newTraffic: {},// 新客数量
      oldTraffic: {},// 老客数量
      signTraffic: {},// 签单数量
      trafficLoading: false,
      productLoading: false,
      producteData: {},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()

        }
      },
      //产品看板
      productForm: {
        timeType: 'DAY',
        dateType: 'DAY',
        selectDate: '',
        startDate: '',
        endDate: ''
      },
      //核心指标
      centerLoading: false,
      centerForm: {
        timeType: 'DAY',
        dateType: 'DAY',
        selectDate: '',
        startDate: '',
        endDate: ''
      },
      centerData: {},
      //客户看板
      customerLoading: false,
      customerForm: {
        timeType: 'DAY',
        dateType: 'DAY',
        selectDate: '',
        startDate: '',
        endDate: ''
      },
      customerData: {},
      options: [
        {
          value: 'DAY',
          label: '按天'
        },
        {
          value: 'WEEK',
          label: '自然周'
        },
        {
          value: 'MONTH',
          label: '自然月'
        },
        {
          value: 'YEAR',
          label: '自然年'
        }
      ],
      myChart: '',
      ringRatio: '+15%',
      ringStaus: true,
      sameRatio: '-15%',
      sameStatus: true
    }
  },
  computed: {
    scalePremRingFlag() {
      return parseFloat(this.centerData.scalePremRing) < 0
    },
    scalePremSameFlag() {
      return parseFloat(this.centerData.scalePremSame) < 0
    },
    signingRateRingFlag() {
      return parseFloat(this.centerData.signingRateRing) < 0
    },
    signingRateSameFlag() {
      return parseFloat(this.centerData.signingRateSame) < 0
    },
    unitPriceRingFlag() {
      return parseFloat(this.centerData.unitPriceRing) < 0
    },
    unitPriceSameFlag() {
      return parseFloat(this.centerData.unitPriceSame) < 0
    },
    policyNumRingFlag() {
      return parseFloat(this.centerData.policyNumRing) < 0
    },
    policyNumSameFlag() {
      return parseFloat(this.centerData.policyNumSame) < 0
    },
    feeCustomerNumRingFlag() {
      return parseFloat(this.centerData.feeCustomerNumRing) < 0
    },
    feeCustomerNumSameFlag() {
      return parseFloat(this.centerData.feeCustomerNumSame) < 0
    },
    // 客户看板
    customerTime() {
      let time = String(this.customerData.startDate || this.customerForm.selectDate[0])
      let date = String(this.customerData.endDate || this.customerForm.selectDate[1])
      return time.replaceAll('-', '/') + '—' + date.replaceAll('-', '/')
    },
    totalCustomerNumRingFlag() {
      return parseFloat(this.customerData.totalCustomerNumRing) < 0
    },
    totalCustomerNumSameFlag() {
      return parseFloat(this.customerData.totalCustomerNumSame) < 0
    },
    visitCustomerNumRingFlag() {
      return parseFloat(this.customerData.visitCustomerNumRing) < 0
    },
    visitCustomerNumSameFlag() {
      return parseFloat(this.customerData.visitCustomerNumSame) < 0
    },
    potentialCustomerNumRingFlag() {
      return parseFloat(this.customerData.potentialCustomerNumRing) < 0
    },
    potentialCustomerNumSameFlag() {
      return parseFloat(this.customerData.potentialCustomerNumSame) < 0
    },
    prospectiveCustomerNumRingFlag() {
      return parseFloat(this.customerData.prospectiveCustomerNumRing) < 0
    },
    prospectiveCustomerNumSameFlag() {
      return parseFloat(this.customerData.prospectiveCustomerNumSame) < 0
    },
    signHistoryCustomerNumRingFlag() {
      return parseFloat(this.customerData.signHistoryCustomerNumRing) < 0
    },
    signHistoryCustomerNumSameFlag() {
      return parseFloat(this.customerData.signHistoryCustomerNumSame) < 0
    },
    lostCustomerNumRingFlag() {
      return parseFloat(this.customerData.lostCustomerNumRing) < 0
    },
    lostCustomerNumSameFlag() {
      return parseFloat(this.customerData.lostCustomerNumSame) < 0
    },
    // 产品看板
    productTime() {
      let time = String(this.producteData.startDate || this.productForm.selectDate[0])
      let date = String(this.producteData.endDate || this.productForm.selectDate[1])
      return time.replaceAll('-', '/') + '—' + date.replaceAll('-', '/')
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },

  methods: {
    init() {
      this.initTime()
      this.getHomeList()
      this.getRiskBoard()
      this.coreTargetBoard()
      this.customerBoard()
    },
    initTime() {
      let startTime = parseTime(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7), '{y}-{m}-{d}')
      let endTime = parseTime(new Date(new Date().getTime()), '{y}-{m}-{d}')
      this.customerForm.selectDate = [startTime, endTime]
      this.centerForm.selectDate = [startTime, endTime]
      this.productForm.selectDate = ['2023-02-13', endTime]
    },
    getHomeList() {
      // 获取流量数据
      // this.trafficLoading = true
      // getHomeList().then((res) => {
      //   if (res.code === 200) {
      //     this.trafficNumbers = res.data.totalCount
      //     this.visitTraffic = res.data.visitTraffic
      //     this.newTraffic = res.data.newTraffic
      //     this.oldTraffic = res.data.oldTraffic
      //     this.signTraffic = res.data.signTraffic
      //     this.trafficLoading = false
      //   }
      // }).catch(() => {
      //   console.log('error')
      //   this.trafficLoading = false
      // })

      this.trafficNumbers = 4160
      this.visitTraffic = {nowTraffic: 1525, yesterdayTraffic: 2555, historyTraffic: 13113}
      this.newTraffic =  {nowTraffic: 25, yesterdayTraffic: 28, historyTraffic: 35}
      this.oldTraffic = {nowTraffic: 5, yesterdayTraffic: 22, historyTraffic: 38}
      this.signTraffic = {nowTraffic: 1, yesterdayTraffic: 6, historyTraffic: 8}
    },
    productChange() {
      //产品看板切换日期
      let isResult = this.reassembly(this.productForm)
      if (!isResult) return
      this.getRiskBoard()
    },
    getRiskBoard() {
      // 获取产品看板数据
      // const params = {
      //   dateType: this.productForm.dateType,
      //   startDate: this.productForm.startDate || this.productForm.selectDate[0] || '',
      //   endDate: this.productForm.endDate || this.productForm.selectDate[1] || ''
      // }
      // console.log(this.productForm, 'productForm', '@@@@@@@!!!!!!!!')
      // this.productLoading = true
      // getRiskBoard(params).then((res) => {
      //   if (res.code === 200) {
      //     console.log(res)
      //     this.producteData = res.data.riskBoardResVO || {}
      //     this.producteData.riskNumList.sort((item, ele) => {
      //       return item.theDate > ele.theDate ? 1 : -1
      //     })
      //     console.log(this.producteData.riskNumList)
      //     this.initProductchart()
      //     this.productLoading = false
      //   }
      // }).catch(() => {
      //   console.log('error')
      //   this.initProductchart()
      //   this.productLoading = false
      // })
      this.producteData = {
        "allRiskNum": "23",
        "addRiskNum": "2",
        "onlineRiskNum": "21",
        "offlineRiskNum": "2",
        "startDate": "2023-02-13",
        "endDate": "2024-04-28",
        "startDateList": "2024-01",
        "endDateList": "2024-12",
        "riskNumList": [
          {
            "theDate": "2024-01",
            "theEndDate": "2024-01",
            "dateAllRiskNum": "0",
            "dateAddRiskNum": "0",
            "dateOnlineRiskNum": "2",
            "dateOfflineRiskNum": "0"
          },
          {
            "theDate": "2024-02",
            "theEndDate": "2024-02",
            "dateAllRiskNum": "0",
            "dateAddRiskNum": "0",
            "dateOnlineRiskNum": "0",
            "dateOfflineRiskNum": "0"
          },
          {
            "theDate": "2024-03",
            "theEndDate": "2024-03",
            "dateAllRiskNum": "0",
            "dateAddRiskNum": "0",
            "dateOnlineRiskNum": "2",
            "dateOfflineRiskNum": "0"
          },
          {
            "theDate": "2024-04",
            "theEndDate": "2024-04",
            "dateAllRiskNum": "0",
            "dateAddRiskNum": "0",
            "dateOnlineRiskNum": "2",
            "dateOfflineRiskNum": "0"
          },
          {
            "theDate": "2024-05",
            "theEndDate": "2024-05",
            "dateAllRiskNum": "0",
            "dateAddRiskNum": "0",
            "dateOnlineRiskNum": "0",
            "dateOfflineRiskNum": "0"
          },
          {
            "theDate": "2024-06",
            "theEndDate": "2024-06",
            "dateAllRiskNum": "0",
            "dateAddRiskNum": "0",
            "dateOnlineRiskNum": "0",
            "dateOfflineRiskNum": "0"
          },
          {
            "theDate": "2024-07",
            "theEndDate": "2024-07",
            "dateAllRiskNum": "0",
            "dateAddRiskNum": "0",
            "dateOnlineRiskNum": "0",
            "dateOfflineRiskNum": "0"
          },
          {
            "theDate": "2024-08",
            "theEndDate": "2024-08",
            "dateAllRiskNum": "0",
            "dateAddRiskNum": "0",
            "dateOnlineRiskNum": "0",
            "dateOfflineRiskNum": "0"
          },
          {
            "theDate": "2024-09",
            "theEndDate": "2024-09",
            "dateAllRiskNum": "0",
            "dateAddRiskNum": "0",
            "dateOnlineRiskNum": "0",
            "dateOfflineRiskNum": "0"
          },
          {
            "theDate": "2024-10",
            "theEndDate": "2024-10",
            "dateAllRiskNum": "0",
            "dateAddRiskNum": "0",
            "dateOnlineRiskNum": "0",
            "dateOfflineRiskNum": "0"
          },
          {
            "theDate": "2024-11",
            "theEndDate": "2024-11",
            "dateAllRiskNum": "0",
            "dateAddRiskNum": "0",
            "dateOnlineRiskNum": "0",
            "dateOfflineRiskNum": "0"
          },
          {
            "theDate": "2024-12",
            "theEndDate": "2024-12",
            "dateAllRiskNum": "0",
            "dateAddRiskNum": "0",
            "dateOnlineRiskNum": "0",
            "dateOfflineRiskNum": "0"
          }
        ]
      }
      this.initProductchart()
    },
    centerChange() {
      //核心指标切换日期
      let isResult = this.reassembly(this.centerForm)
      if (!isResult) return
      this.coreTargetBoard()
    },
    coreTargetBoard() {
      // 获取核心指标数据
      const params = {
        dateType: this.centerForm.dateType,
        startDate: this.centerForm.startDate || this.centerForm.selectDate[0] || '',
        endDate: this.centerForm.endDate || this.centerForm.selectDate[1] || ''
      }
      // this.centerLoading = true
      // coreTargetBoard(params).then((res) => {
      //   if (res.code === 200) {
      //     console.log(res)
      //     this.centerData = res.data.coreTargetResDTO || {}
      //     this.initChart()
      //     this.centerLoading = false
      //   }
      // }).catch(() => {
      //   console.log('error')
      //   this.initChart()
      //   this.centerLoading = false
      // })
      this.centerData = {
        scalePrem: '10.8',
        scalePremRing: '24%',
        scalePremSame: '2%' ,
        signingRate: '1.8%',
        signingRateRing: '1.3%',
        signingRateSame: '1%',
        unitPrice: '3289',
        unitPriceRing: '0.8%',
        unitPriceSame: '0.6%',
        policyNum: '8',
        policyNumRing: '-97.90%',
        policyNumSame: '-99.48%',
        feeCustomerNum: '8',
        feeCustomerNumRing: '-97.51%',
        feeCustomerNumSame: '-99.44%',
      }
      this.initChart()
    },
    customerChange() {
      //客户看板切换日期
      let isResult = this.reassembly(this.customerForm)
      if (!isResult) return
      this.customerBoard()
    },
    customerBoard() {
      // // 获取客户看板数据
      // const params = {
      //   dateType: this.customerForm.dateType,
      //   startDate: this.customerForm.startDate || this.customerForm.selectDate[0] || '',
      //   endDate: this.customerForm.endDate || this.customerForm.selectDate[1] || ''
      // }
      // this.customerLoading = true
      // customerBoard(params).then((res) => {
      //   if (res.code === 200) {
      //     console.log(res)
      //     this.customerData = res.data.customerBoardResDTO || {}
      //     this.initCustomerchart()
      //     this.customerLoading = false
      //   }
      // }).catch(() => {
      //   console.log('error')
      //   this.initCustomerchart()
      //   this.customerLoading = false
      // })
      this.customerData = {
        "totalCustomerNum": 159,
        "totalCustomerNumSame": "-37.26%",
        "totalCustomerNumRing": "-27.56%",
        "visitCustomerNum": 48,
        "visitCustomerNumSame": "-45.40%",
        "visitCustomerNumRing": "-22.42%",
        "potentialCustomerNum": 32,
        "potentialCustomerNumSame": "-36.24%",
        "potentialCustomerNumRing": "-26.80%",
        "prospectiveCustomerNum": 56,
        "prospectiveCustomerNumSame": "-41.48%",
        "prospectiveCustomerNumRing": "-60.74%",
        "signHistoryCustomerNum": 22,
        "signHistoryCustomerNumSame": "-97.51%",
        "signHistoryCustomerNumRing": "-99.44%",
        "lostCustomerNum": 1,
        "lostCustomerNumSame": "0%",
        "lostCustomerNumRing": "0%",
        "startDateList": "2024-04-21",
        "endDateList": "2024-04-28",
        "startDate": "2024-04-22",
        "endDate": "2024-04-28",
        "cumulativePotentialNum": 22,
        "cumulativeProspectiveNum": 37,
        "cumulativeSignHistoryNum": 8,
        "cumulativeTotalNum": 67,
        "signHistoryCustomerNumList": [
          {
            "theDate": "2024-04-19",
            "theEndDate": "2024-04-19",
            "dateSignHistoryCustomerNum": "0"
          },
          {
            "theDate": "2024-04-20",
            "theEndDate": "2024-04-20",
            "dateSignHistoryCustomerNum": "0"
          },
          {
            "theDate": "2024-04-21",
            "theEndDate": "2024-04-21",
            "dateSignHistoryCustomerNum": "3"
          },
          {
            "theDate": "2024-04-22",
            "theEndDate": "2024-04-22",
            "dateSignHistoryCustomerNum": "3"
          },
          {
            "theDate": "2024-04-23",
            "theEndDate": "2024-04-23",
            "dateSignHistoryCustomerNum": "3"
          },
          {
            "theDate": "2024-04-24",
            "theEndDate": "2024-04-24",
            "dateSignHistoryCustomerNum": "8"
          },
          {
            "theDate": "2024-04-25",
            "theEndDate": "2024-04-25",
            "dateSignHistoryCustomerNum": "5"
          },
          {
            "theDate": "2024-04-26",
            "theEndDate": "2024-04-26",
            "dateSignHistoryCustomerNum": "0"
          }
        ],
        "totalCustomerNumList": [
          {
            "theDate": "2024-04-19",
            "dateTotalCustomerNum": 21
          },
          {
            "theDate": "2024-04-20",
            "dateTotalCustomerNum": 16
          },
          {
            "theDate": "2024-04-21",
            "dateTotalCustomerNum": 18
          },
          {
            "theDate": "2024-04-22",
            "dateTotalCustomerNum": 26
          },
          {
            "theDate": "2024-04-23",
            "dateTotalCustomerNum": 24
          },
          {
            "theDate": "2024-04-24",
            "dateTotalCustomerNum": 21
          },
          {
            "theDate": "2024-04-25",
            "dateTotalCustomerNum": 30
          },
          {
            "theDate": "2024-04-26",
            "dateTotalCustomerNum": 3
          }
        ],
        "visitCustomerNumList": [
          {
            "theDate": "2024-04-19",
            "dateVisitCustomerNum": 7
          },
          {
            "theDate": "2024-04-20",
            "dateVisitCustomerNum": 3
          },
          {
            "theDate": "2024-04-21",
            "dateVisitCustomerNum": 9
          },
          {
            "theDate": "2024-04-22",
            "dateVisitCustomerNum": 5
          },
          {
            "theDate": "2024-04-23",
            "dateVisitCustomerNum": 4
          },
          {
            "theDate": "2024-04-24",
            "dateVisitCustomerNum": 4
          },
          {
            "theDate": "2024-04-25",
            "dateVisitCustomerNum": 10
          },
          {
            "theDate": "2024-04-26",
            "dateVisitCustomerNum": 6
          }
        ],
        "potentialCustomerNumList": [
          {
            "theDate": "2024-04-19",
            "datePotentialCustomerNum": 5
          },
          {
            "theDate": "2024-04-20",
            "datePotentialCustomerNum": 1
          },
          {
            "theDate": "2024-04-21",
            "datePotentialCustomerNum":3
          },
          {
            "theDate": "2024-04-22",
            "datePotentialCustomerNum": 4
          },
          {
            "theDate": "2024-04-23",
            "datePotentialCustomerNum": 5
          },
          {
            "theDate": "2024-04-24",
            "datePotentialCustomerNum": 4
          },
          {
            "theDate": "2024-04-25",
            "datePotentialCustomerNum": 8
          },
          {
            "theDate": "2024-04-26",
            "datePotentialCustomerNum": 2
          }
        ],
        "prospectiveCustomerNumList": [
          {
            "theDate": "2024-04-19",
            "dateProspectiveCustomerNum": 7
          },
          {
            "theDate": "2024-04-20",
            "dateProspectiveCustomerNum": 3
          },
          {
            "theDate": "2024-04-21",
            "dateProspectiveCustomerNum": 5
          },
          {
            "theDate": "2024-04-22",
            "dateProspectiveCustomerNum": 12
          },
          {
            "theDate": "2024-04-23",
            "dateProspectiveCustomerNum": 10
          },
          {
            "theDate": "2024-04-24",
            "dateProspectiveCustomerNum": 8
          },
          {
            "theDate": "2024-04-25",
            "dateProspectiveCustomerNum": 4
          },
          {
            "theDate": "2024-04-26",
            "dateProspectiveCustomerNum": 6
          }
        ],
        "lostCustomerNumList": [
          {
            "theDate": "2024-04-19",
            "dateLostCustomerNum": "0"
          },
          {
            "theDate": "2024-04-20",
            "dateLostCustomerNum": "0"
          },
          {
            "theDate": "2024-04-21",
            "dateLostCustomerNum": "0"
          },
          {
            "theDate": "2024-04-22",
            "dateLostCustomerNum": "0"
          },
          {
            "theDate": "2024-04-23",
            "dateLostCustomerNum": "0"
          },
          {
            "theDate": "2024-04-24",
            "dateLostCustomerNum": "0"
          },
          {
            "theDate": "2024-04-25",
            "dateLostCustomerNum": "0"
          },
          {
            "theDate": "2024-04-26",
            "dateLostCustomerNum": "0"
          }
        ]
      }
      this.initCustomerchart()
    },
    initChart() {
      // 销售概况表1
      // let NameData = this.centerData?.policyNumList?.map(item => item.theDate) || [0]
      let NameData = ['2024-04-19', '2024-04-20', '2024-04-21', '2024-04-22', '2024-04-23', '2024-04-24', '2024-04-25', '2024-04-26']
      // let datePolicyNum = this.centerData?.policyNumList?.map(item => item.datePolicyNum) || [0]
      let datePolicyNum = [0,0,1,1,1,3,2,0]
      // let dateSignCustomerNum = this.centerData?.signCustomerNumList?.map(item => item.dateSignCustomerNum) || [0]
      let dateSignCustomerNum = [0,0,1,1,1,3,2,0]
      let NameData1 = ['NameDate', ...NameData] || ['NameDate']
      let datePolicyNum1 = ['datePolicyNum', ...datePolicyNum] || ['datePolicyNum']
      let dateSignCustomerNum1 = ['dateSignCustomerNum', ...dateSignCustomerNum] || ['dateSignCustomerNum']
      this.myChart = echarts.init(document.getElementById('chartOne'))
      this.myChart.setOption({
        dataset: {
          source: [
            NameData1,
            datePolicyNum1,
            dateSignCustomerNum1,
          ]
        },
        title: {
          text: '销售概况（保单数量、客户数量）'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          //   orient: "vertical",
          x: 'right', //可设定图例在左、右、居中
          y: 'top', //可设定图例在上、下、居中
          padding: [30, 15, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离
          data: ['保单数量', '签单客户数量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        color: ['#FFB860', '#082aff'],
        xAxis: {
          type: 'category',
          data: NameData,
          axisLabel: {
            interval: 0,
            rotate: NameData.length > 8 ? 45 : 0
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'},
            name: '保单数量',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            // showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            showSymbol: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(255,82,82,0.06)'
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(254,97,89,0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#FFBC72',
                borderColor: 'rgba(255,207,118,0.27)',
                borderWidth: 12
              }
            },
          },
          {
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'},
            name: '签单客户数量',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            // showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            showSymbol: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(255,82,82,0.06)'
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(254,97,89,0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#082aff ',
                borderColor: 'rgba(255,207,118,0.27)',
                borderWidth: 12
              }
            },
          }
        ]
      })
      // let scaleNameData = this.centerData?.scalePremList?.map(item => item.theDate) || [0]
      let scaleNameData = ['2024-04-19', '2024-04-20', '2024-04-21', '2024-04-22', '2024-04-23', '2024-04-24', '2024-04-25', '2024-04-26']
      // let dateScalePrem = this.centerData?.scalePremList?.map(item => item.dateScalePrem) || [0]
      let dateScalePrem = [0,0,82,136,263,1242,306,1049,0]
      // 销售概况表2
      this.myChart = echarts.init(document.getElementById('chartTwo'))
      this.myChart.setOption({
        title: {
          text: '销售概况（规模保费）'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          //   orient: "vertical",
          x: 'right', //可设定图例在左、右、居中
          y: 'top', //可设定图例在上、下、居中
          padding: [30, 15, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离
          data: ['规模保费']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        color: ['#2ADEDC'],
        xAxis: {
          type: 'category',
          data: scaleNameData,
          axisLabel: {
            interval: 0,
            rotate: scaleNameData.length > 8 ? 45 : 0
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '规模保费',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            // showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            showSymbol: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(50,216,214,0.06)'
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(45,220,217,0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#2ADEDC',
                borderColor: 'rgba(255,207,118,0.27)',
                borderWidth: 12
              }
            },
            stack: 'Total',
            data: dateScalePrem
          }
        ]
      })
    },
    initCustomerchart() {
      // 全部客户趋势
      let nameDataTotal = this.customerData?.totalCustomerNumList?.map(item => item.theDate) || [0]
      let dateTotalCustomerNum = this.customerData?.totalCustomerNumList?.map(item => item.dateTotalCustomerNum) || [0]
      this.myChart = echarts.init(document.getElementById('chartsOne'))
      this.myChart.setOption({
        title: {
          text: '全部客户趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          //   orient: "vertical",
          x: 'right', //可设定图例在左、右、居中
          y: 'top', //可设定图例在上、下、居中
          padding: [30, 15, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离
          data: ['全部客户数量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        color: ['#082aff'],
        xAxis: {
          type: 'category',
          data: nameDataTotal,
          axisLabel: {
            interval: 0,
            rotate: nameDataTotal.length > 8 ? 45 : 0
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '全部客户数量',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            // showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            // showSymbol: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(244,93,55,0.06)'
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(249,89,50,0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#082aff',
                borderColor: 'rgba(255,207,118,0.27)',
                borderWidth: 12
              }
            },
            stack: 'Total',
            data: dateTotalCustomerNum
          }
        ]
      })
      // 访客客户趋势
      let nameDataVisit = this.customerData?.visitCustomerNumList?.map(item => item.theDate) || [0]
      let dateVisitCustomerNum = this.customerData?.visitCustomerNumList?.map(item => item.dateVisitCustomerNum) || [0]
      this.myChart = echarts.init(document.getElementById('chartsTwo'))
      this.myChart.setOption({
        title: {
          text: '访客客户趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          //   orient: "vertical",
          x: 'right', //可设定图例在左、右、居中
          y: 'top', //可设定图例在上、下、居中
          padding: [30, 15, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离
          data: ['访客客户数量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        color: ['#FFAD3A '],
        xAxis: {
          type: 'category',
          data: nameDataVisit,
          axisLabel: {
            interval: 0,
            rotate: nameDataVisit.length > 8 ? 45 : 0
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '访客客户数量',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            // showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            showSymbol: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(244,93,55,0.06)'
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(249,89,50,0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#FFAD3A',
                borderColor: 'rgba(255,207,118,0.27)',
                borderWidth: 12
              }
            },
            stack: 'Total',
            data: dateVisitCustomerNum
          }
        ]
      })
      // 潜客客户趋势
      let nameDataPotential = this.customerData?.potentialCustomerNumList?.map(item => item.theDate) || [0]
      let datePotentialCustomerNum = this.customerData?.potentialCustomerNumList?.map(item => item.datePotentialCustomerNum) || [0]
      this.myChart = echarts.init(document.getElementById('chartsThree'))
      this.myChart.setOption({
        title: {
          text: '潜客客户趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          //   orient: "vertical",
          x: 'right', //可设定图例在左、右、居中
          y: 'top', //可设定图例在上、下、居中
          padding: [30, 15, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离
          data: ['潜客客户数量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        color: ['#2ADEDC'],
        xAxis: {
          type: 'category',
          data: nameDataPotential,
          axisLabel: {
            interval: 0,
            rotate: nameDataPotential.length > 8 ? 45 : 0
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '潜客客户数量',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            // showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            showSymbol: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(42,222,220,0.06)'
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(42,222,220,0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#2ADEDC',
                borderColor: 'rgba(255,207,118,0.27)',
                borderWidth: 12
              }
            },
            stack: 'Total',
            data: datePotentialCustomerNum
          }
        ]
      })
      // 准客客户趋势
      let nameDataPro = this.customerData?.prospectiveCustomerNumList?.map(item => item.theDate) || [0]
      let dateProspectiveCustomerNum = this.customerData?.prospectiveCustomerNumList?.map(item => item.dateProspectiveCustomerNum) || [0]
      this.myChart = echarts.init(document.getElementById('chartsFour'))
      this.myChart.setOption({
        title: {
          text: '准客客户趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          //   orient: "vertical",
          x: 'right', //可设定图例在左、右、居中
          y: 'top', //可设定图例在上、下、居中
          padding: [30, 15, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离
          data: ['准客客户数量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        color: ['#082aff'],
        xAxis: {
          type: 'category',
          data: nameDataPro,
          axisLabel: {
            interval: 0,
            rotate: nameDataPro.length > 8 ? 45 : 0
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '准客客户数量',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            // showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            showSymbol: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(244,93,55,0.06)'
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(249,89,50,0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#082aff',
                borderColor: 'rgba(255,207,118,0.27)',
                borderWidth: 12
              }
            },
            stack: 'Total',
            data: dateProspectiveCustomerNum
          }
        ]
      })
      // 存量客户趋势
      let nameDataSign = this.customerData?.signHistoryCustomerNumList?.map(item => item.theDate) || [0]
      let dateSignHistoryCustomerNum = this.customerData?.signHistoryCustomerNumList?.map(item => item.dateSignHistoryCustomerNum) || [0]
      this.myChart = echarts.init(document.getElementById('chartsFive'))
      this.myChart.setOption({
        title: {
          text: '存量客户趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          //   orient: "vertical",
          x: 'right', //可设定图例在左、右、居中
          y: 'top', //可设定图例在上、下、居中
          padding: [30, 15, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离
          data: ['存量客户数量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        color: ['#FFAD3A'],
        xAxis: {
          type: 'category',
          data: nameDataSign,
          axisLabel: {
            interval: 0,
            rotate: nameDataSign.length > 8 ? 45 : 0
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '存量客户数量',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            // showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            showSymbol: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(244,93,55,0.06)'
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(249,89,50,0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#FFAD3A',
                borderColor: 'rgba(255,207,118,0.27)',
                borderWidth: 12
              }
            },
            stack: 'Total',
            data: dateSignHistoryCustomerNum
          }
        ]
      })
      // 流失客户趋势
      let nameDataLost = this.customerData?.lostCustomerNumList?.map(item => item.theDate) || [0]
      let dateLostCustomerNum = this.customerData?.lostCustomerNumList?.map(item => item.dateLostCustomerNum) || [0]
      this.myChart = echarts.init(document.getElementById('chartsSix'))
      this.myChart.setOption({
        title: {
          text: '流失客户趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          //   orient: "vertical",
          x: 'right', //可设定图例在左、右、居中
          y: 'top', //可设定图例在上、下、居中
          padding: [30, 15, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离
          data: ['流失客户数量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        color: ['#2ADEDC'],
        xAxis: {
          type: 'category',
          data: nameDataLost,
          axisLabel: {
            interval: 0,
            rotate: nameDataLost.length > 8 ? 45 : 0
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '流失客户数量',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            // showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            showSymbol: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(42,222,220,0.06)'
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(42,222,220,0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#2ADEDC',
                borderColor: 'rgba(255,207,118,0.27)',
                borderWidth: 12
              }
            },
            stack: 'Total',
            data: dateLostCustomerNum
          }
        ]
      })
    },
    initProductchart() {
      // 产品看板
      let nameData = this.producteData?.riskNumList?.map(item => item.theDate) || [0]
      let allRiskNumList = this.producteData?.riskNumList?.map(item => item.dateAllRiskNum) || [0]
      let addRiskNumList = this.producteData?.riskNumList?.map(item => item.dateAddRiskNum) || [0]
      let onlineNumList = this.producteData?.riskNumList?.map(item => item.dateOnlineRiskNum) || [0]
      let offlineNumList = this.producteData?.riskNumList?.map(item => item.dateOfflineRiskNum) || [0]
      this.myChart = echarts.init(document.getElementById('chart1'))
      let nameData1 = ['nameData', ...nameData] || [0]
      let allRiskNumList1 = ['allRiskNumList', ...allRiskNumList] || [0]
      let addRiskNumList1 = ['addRiskNumList', ...addRiskNumList] || [0]
      let onlineNumList1 = ['onlineNumList', ...onlineNumList] || [0]
      let offlineNumList1 = ['offlineNumList', ...offlineNumList] || [0]
      this.myChart.setOption({
        dataset: {
          source: [
            nameData1,
            allRiskNumList1,
            addRiskNumList1,
            onlineNumList1,
            offlineNumList1,
          ]
        },
        title: {
          text: '产品变化趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          //   orient: "vertical",
          x: 'right', //可设定图例在左、右、居中
          y: 'top', //可设定图例在上、下、居中
          padding: [30, 15, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离
          data: ['全部', '新增', '在售', '停售']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        color: ['#FFAD3A', '#082aff', '#2ADEDC', '#d3d3d3'],
        xAxis: {
          type: 'category',
          // data: nameData,
          axisLabel: {
            interval: 0,
            // rotate: nameData.length > 14 ? 45 : 0
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '全部',
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'},
            symbol: 'circle',
            symbolSize: 5,
            // showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            showSymbol: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(244,93,55,0.06)'
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(249,89,50,0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#FFAD3A',
                borderColor: 'rgba(255,207,118,0.27)',
                borderWidth: 12
              }
            },
          },
          {
            type: 'line',
            name: '新增',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'},
            symbol: 'circle',
            symbolSize: 5,
            // showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            showSymbol: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(244,93,55,0.06)'
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(249,89,50,0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#082aff',
                borderColor: 'rgba(255,207,118,0.27)',
                borderWidth: 12
              }
            },

          },
          {
            type: 'line',
            name: '在售',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'},
            symbol: 'circle',
            symbolSize: 5,
            // showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            showSymbol: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(42,222,220,0.06)'
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(42,222,220,0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#2ADEDC',
                borderColor: 'rgba(255,207,118,0.27)',
                borderWidth: 12
              }
            },
          },
          {
            type: 'line',
            name: '停售',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'},
            symbol: 'circle',
            symbolSize: 5,
            // showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            showSymbol: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(204,204,204,0.06)'
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(204,204,204,0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#d3d3d3',
                borderColor: 'rgba(255,207,118,0.27)',
                borderWidth: 12
              },
              lineStyle: {
                // 使用rgba设置折线透明度为0，可以视觉上隐藏折线
                color: 'rgba(0,0,0,0)'
              }
            },
          },
        ]
      })
    },
    // 日期框change事件
    selectChange(form) {
      form.selectDate = ''
      form.startDate = ''
      form.endDate = ''
    },
    // 组装startDate和endDate入参
    reassembly(form) {
      if (!form.selectDate && form.timeType !== 'YEAR') return
      if (form.timeType === 'DAY') {
        // 日
        form.dateType = 'DAY'
        form.startDate = form.selectDate[0]
        form.endDate = form.selectDate[1]
        return true
      } else if (form.timeType === 'WEEK') {
        // 周
        form.dateType = 'DAY'
        form.startDate = parseTime(new Date(new Date(form.selectDate).getTime() - 24 * 60 * 60 * 1000), '{y}-{m}-{d}')
        form.endDate = parseTime(new Date(new Date(form.selectDate).getTime() + 5 * 24 * 60 * 60 * 1000), '{y}-{m}-{d}')
        return true
      } else if (form.timeType === 'MONTH') {
        // 月
        form.dateType = 'MONTH'
        form.startDate = form.selectDate[0]
        form.endDate = form.selectDate[1]
        return true
      } else if (form.timeType === 'YEAR') {
        // 年
        form.dateType = 'YEAR'
        if (!form.startDate || !form.endDate) return false
        try {
          if (Number(form.startDate) > Number(form.endDate)) {
            throw new Error('起始年份不得大于结束年份')
          }
          return true
        } catch (error) {
          this.$message.error(error.message)
          return false
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: column;

  .selector {
    width: 98px;
    height: 32px;
    border-radius: 2px;
    margin-right: 12px;
    // border: 1px solid #eeeeee;
  }

  .picker {
    width: 304px;
    height: 32px;
    background: #ffffff;
    border-radius: 2px;
    // border: 1px solid #eeeeee;
  }

  .traffic {
    display: flex;
    flex-direction: row;
    width: 100%;

    .leftSider {
      width: 227px;
      height: 173px;
      background: #ffffff;
      border-radius: 8px;
      margin: 20px 0;
      padding-top: 1px;

      .infostyle {
        display: flex;
        flex-direction: row;
        margin-top: 14px;
        margin-bottom: 25px;
        font-size: 18px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: #393b44;

        .titleboxstyle {
          display: inline-block;
          width: 3px;
          height: 18px;
          background-color: #082aff;
          // margin-left: -20px;
        }
      }

      .number {
        width: 120px;
        height: 30px;
        font-size: 26px;
        font-family: Arial-BoldMT, Arial;
        font-weight: normal;
        color: #393b44;
        line-height: 31px;
        margin-top: 40px;
        margin-left: 75px;

        .price {
          width: 13px;
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #41433c;
          line-height: 17px;
          margin-left: 4px;
        }
      }
    }

    .rightSider {
      display: flex;
      flex-direction: column;
      width: 90%;
      margin-left: 15px;

      // margin-top: 20px;
      .box {
        display: flex;
        justify-content: space-evenly;
        // width: 956px;
        height: 40px;
        // background: #ffffff;
        border-radius: 8px;

        span {
          width: 52px;
          height: 17px;
          font-size: 13px;
          font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
          font-weight: bold;
          color: #393b44;
          line-height: 17px;
          margin-top: 15px;
        }
      }

      .box1 {
        display: flex;
        justify-content: space-evenly;
        // width: 956px;
        height: 40px;
        background: #ffffff;
        border-radius: 8px;
        margin-top: 10px;
        padding-left: 5px;

        div {
          width: 65px;
          height: 18px;
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #505050;
          line-height: 18px;
          margin-top: 11px;
        }

        .span1 {
          padding-left: 13px;
        }
      }

      .box2 {
        display: flex;
        justify-content: space-evenly;
        // width: 956px;
        height: 40px;
        background: #ffffff;
        border-radius: 8px;
        margin-top: 10px;
        padding-left: 10px;

        div {
          width: 65px;
          height: 18px;
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #505050;
          line-height: 18px;
          margin-top: 11px;
        }

        .span2 {
          padding-left: 11px;
        }
      }

      .box3 {
        display: flex;
        justify-content: space-evenly;
        // width: 956px;
        height: 40px;
        background: #ffffff;
        border-radius: 8px;
        margin-top: 10px;
        padding-left: 10px;

        div {
          width: 65px;
          height: 18px;
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #505050;
          line-height: 18px;
          margin-top: 11px;
        }

        .span3 {
          padding-left: 10px;
        }
      }
    }
  }

  .core {
    width: 100%;
    // width: 1700px;
    height: 542px;
    background: #ffffff;
    border-radius: 8px;
    padding-bottom: 50px;

    .head {
      display: flex;
      // flex-direction: row;
      justify-content: space-between;
      width: 100%;

      // padding-right: 440px;
      .infostyle {
        display: flex;
        flex-direction: row;
        margin-top: 14px;
        margin-bottom: 25px;
        font-size: 18px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: #393b44;

        .titleboxstyle {
          display: inline-block;
          width: 3px;
          height: 18px;
          background-color: #082aff;
          // margin-left: -20px;
        }
      }

      .rightSider {
        margin-top: 14px;
        margin-right: 20px;
      }
    }

    .modules {
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-evenly;

      .module1 {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        margin-bottom: 34px;
        margin-left: 20px;

        .titles {
          width: 56px;
          height: 18px;
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #41433c;
          line-height: 18px;
          letter-spacing: 1px;
        }

        .number {
          height: 30px;
          font-size: 26px;
          font-family: Arial-BoldMT, Arial;
          font-weight: normal;
          color: #393b44;
          line-height: 31px;
          margin-top: 7px;

          .price {
            width: 13px;
            height: 17px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #41433c;
            line-height: 17px;
            margin-left: 4px;
          }
        }

        .data {
          display: flex;
          flex-flow: row;
          margin-top: 8px;

          .ring {
            display: block;
            width: 30px;
            height: 14px;
            font-size: 10px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #cccccc;
            line-height: 14px;
          }

          .text {
            width: 32px;
            height: 14px;
            font-size: 12px;
            font-family: Arial-BoldMT, Arial;
            font-weight: normal;
            color: #58ca86;
            line-height: 14px;
          }

          .img {
            margin: 3px 3px 0 2px;
          }

          .same {
            width: 30px;
            height: 14px;
            font-size: 10px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #cccccc;
            line-height: 14px;
          }

          .text1 {
            width: 32px;
            height: 14px;
            font-size: 12px;
            font-family: Arial-BoldMT, Arial;
            font-weight: normal;
            color: #ff5252;
            line-height: 14px;
          }
        }
      }

      .line {
        width: 1px;
        height: 46px;
        border: 1px solid #f0f0f0;
        margin: 40px 0px;
        margin-right: 40px;
      }
    }

    .chart {
      width: 100%;
      display: flex;
      flex-direction: row;
      padding-right: 40px;
      padding-left: 20px;

      #chartOne {
        flex: 1;
        // width: 570px;
        height: 340px;
        border-radius: 4px;
        border: 1px solid #eeeeee;
        margin-left: 20px;
        padding: 10px 10px 10px 10px;
        box-sizing: border-box;
      }

      #chartTwo {
        flex: 1;
        // width: 570px;
        height: 340px;
        border-radius: 4px;
        border: 1px solid #eeeeee;
        margin-left: 100px;
        padding: 10px 10px 10px 10px;
        box-sizing: border-box;
      }
    }
  }

  .cutomer {
    width: 100%;
    // width: 1700px;
    height: 1389px;
    background: #ffffff;
    border-radius: 8px;
    margin-top: 16px;
    padding-bottom: 50px;

    .head {
      display: flex;
      // flex-direction: row;
      justify-content: space-between;
      width: 100%;

      .infostyle {
        flex: 1;
        display: flex;
        flex-direction: row;
        margin-top: 14px;
        margin-bottom: 25px;
        font-size: 18px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: #393b44;

        .titleboxstyle {
          display: inline-block;
          width: 3px;
          height: 18px;
          background-color: #082aff;
          // margin-left: -20px;
        }
      }

      .rightSider {
        // flex: 1;
        margin-top: 14px;
        margin-right: 20px;
        // margin-left: 1150px;
      }
    }

    .modules {
      width: 100%;
      display: flex;
      // justify-content: space-evenly;
      flex-flow: row nowrap;
      margin-left: 20px;

      .module1 {
        flex: 1;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        margin-top: 25px;
        margin-bottom: 34px;
        // margin-left: 28px;
        margin: 20px 0px;
        margin-left: 25px;

        .titles {
          width: 56px;
          height: 18px;
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #41433c;
          line-height: 18px;
          letter-spacing: 1px;
        }

        .number {
          height: 30px;
          font-size: 26px;
          font-family: Arial-BoldMT, Arial;
          font-weight: normal;
          color: #393b44;
          line-height: 31px;
          margin-top: 7px;

          .price {
            width: 13px;
            height: 17px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #41433c;
            line-height: 17px;
            margin-left: 4px;
          }
        }

        .data {
          margin-top: 8px;

          .ring {
            width: 22px;
            height: 14px;
            font-size: 10px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #cccccc;
            line-height: 14px;
          }

          .text {
            width: 32px;
            height: 14px;
            font-size: 12px;
            font-family: Arial-BoldMT, Arial;
            font-weight: normal;
            color: #58ca86;
            line-height: 14px;
          }

          .same {
            width: 22px;
            height: 14px;
            font-size: 10px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #cccccc;
            line-height: 14px;
          }

          .text1 {
            width: 32px;
            height: 14px;
            font-size: 12px;
            font-family: Arial-BoldMT, Arial;
            font-weight: normal;
            color: #ff5252;
            line-height: 14px;
          }
        }
      }

      .line {
        width: 1px;
        height: 46px;
        border: 1px solid #f0f0f0;
        margin: 40px 0px;
      }
    }

    .active {
      width: 100%;
      display: flex;
      flex-direction: row;
      margin-bottom: 30px;
      padding-right: 40px;

      .active1 {
        flex: 1;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        width: 275px;
        height: 114px;
        background: #fafafa;
        border-radius: 4px;
        border: 1px solid #eeeeee;
        margin-left: 40px;
        padding-top: 20px;
        padding-left: 28px;

        .titles {
          width: 400px;
          height: 18px;
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #41433c;
          line-height: 18px;
          letter-spacing: 1px;
        }

        .number {
          height: 30px;
          font-size: 26px;
          font-family: Arial-BoldMT, Arial;
          font-weight: normal;
          color: #393b44;
          line-height: 31px;
          margin-top: 7px;

          .price {
            width: 13px;
            height: 17px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #41433c;
            line-height: 17px;
            margin-left: 4px;
          }
        }

        .date {
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #cccccc;
          line-height: 17px;
          margin-top: 3px;
        }
      }
    }

    .chart {
      width: 100%;
      display: flex;
      flex-direction: row;
      padding-right: 40px;
      padding-left: 20px;

      #chartsOne {
        // width: 570px;
        flex: 1;
        box-sizing: border-box;
        height: 324px;
        border-radius: 4px;
        border: 1px solid #eeeeee;
        margin-left: 20px;
        padding: 10px 10px 10px 10px;
      }

      #chartsTwo {
        // width: 570px;
        flex: 1;
        box-sizing: border-box;
        height: 324px;
        border-radius: 4px;
        border: 1px solid #eeeeee;
        margin-left: 100px;
        padding: 10px 10px 10px 10px;
      }
    }

    .chart1 {
      width: 100%;
      display: flex;
      flex-direction: row;
      margin-top: 25px;
      padding-right: 40px;
      padding-left: 20px;

      #chartsThree {
        // width: 570px;
        flex: 1;
        box-sizing: border-box;
        height: 324px;
        border-radius: 4px;
        border: 1px solid #eeeeee;
        margin-left: 20px;
        padding: 10px 10px 10px 10px;
      }

      #chartsFour {
        // width: 570px;
        flex: 1;
        box-sizing: border-box;
        height: 324px;
        border-radius: 4px;
        border: 1px solid #eeeeee;
        margin-left: 105px;
        padding: 10px 10px 10px 10px;
      }
    }

    .chart2 {
      width: 100%;
      display: flex;
      flex-direction: row;
      margin-top: 30px;
      padding-right: 40px;
      padding-left: 20px;

      #chartsFive {
        flex: 1;
        box-sizing: border-box;
        // width: 570px;
        height: 324px;
        border-radius: 4px;
        border: 1px solid #eeeeee;
        margin-left: 20px;
        padding: 10px 10px 10px 10px;
      }

      #chartsSix {
        flex: 1;
        box-sizing: border-box;
        // width: 570px;
        height: 324px;
        border-radius: 4px;
        border: 1px solid #eeeeee;
        margin-left: 105px;
        padding: 10px 10px 10px 10px;
      }
    }
  }

  .product {
    width: 100%;
    // width: 1700px;
    height: 600px;
    background: #ffffff;
    border-radius: 8px;
    margin-top: 20px;

    .head {
      display: flex;
      // flex-direction: row;
      justify-content: space-between;
      width: 100%;

      .infostyle {
        flex: 1;
        display: flex;
        flex-direction: row;
        margin-top: 14px;
        margin-bottom: 25px;
        font-size: 18px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: #393b44;

        .titleboxstyle {
          display: inline-block;
          width: 3px;
          height: 18px;
          background-color: #082aff;
          // margin-left: -20px;
        }
      }

      .rightSider {
        margin-top: 14px;
        margin-right: 20px;
        // margin-left: 1150px;
      }
    }

    .active {
      display: flex;
      flex-direction: row;
      width: 100%;
      margin: 30px 0;
      padding-right: 40px;

      .active1 {
        flex: 1;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        width: 275px;
        height: 114px;
        background: #fafafa;
        border-radius: 4px;
        border: 1px solid #eeeeee;
        margin-left: 40px;
        padding-top: 20px;
        padding-left: 28px;

        .text2 {
          width: 44px;
          height: 14px;
          font-size: 10px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 14px;
          margin-right: 9px;
        }

        .text1 {
          width: 29px;
          height: 14px;
          font-size: 12px;
          font-family: Arial-BoldMT, Arial;
          font-weight: normal;
          color: #ff5252;
          line-height: 14px;
        }

        .titles {
          width: 100px;
          height: 18px;
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #41433c;
          line-height: 18px;
          letter-spacing: 1px;
        }

        .number {
          height: 30px;
          font-size: 26px;
          font-family: Arial-BoldMT, Arial;
          font-weight: normal;
          color: #393b44;
          line-height: 31px;
          margin-top: 7px;

          .price {
            width: 13px;
            height: 17px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #41433c;
            line-height: 17px;
            margin-left: 4px;
          }
        }

        .date {
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #cccccc;
          line-height: 17px;
          margin-top: 3px;
        }
      }
    }

    .chart {
      width: 100%;
      padding-right: 40px;
      padding-left: 20px;

      #chart1 {
        flex: 1;
        box-sizing: border-box;
        // width: 1240px;
        height: 326px;
        border-radius: 9px;
        border: 1px solid #eeeeee;
        margin-left: 20px;
        margin-bottom: 30px;
        padding: 10px 10px 10px 10px;
      }
    }
  }
}
</style>
